<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务七：实现常见的技术产品官网的页面架构及样式布局</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="top">
		<div class="logo fl">
			<div class="logoi"></div>新世界
		</div>
		<ul class="fr">
			<li class="this"><a href="/">首页</a></li>
			<li><a href="##">最新活动</a></li>
			<li><a href="##">项目介绍</a></li>
			<li><a href="##">爱心社区</a></li>
			<li><a href="##">关于我们</a></li>
			<li><a href="##"><span class="login"></span>登录</a></li>
		</ul>
	</div>
	<div class="ban">
		<div class="fl">
			<h2>Time of new life</h2>
			<p>新时代，年轻的人们让我们一起<br>体验新生活，享受新生活</p>
			<a href="#">开始体验</a>
		</div>
	</div>
	<div class="section1">
		<ul>
			<li>
				<span class="s1i s1i1"></span>
				<p>打造全新世界观，让你更<br>爱你的生活</p>
			</li>
			<li>
				<span class="s1i s1i2"></span>
				<p>丰富多彩的公益活动，发<br>挥新世界的主人公意识</p>
			</li>
			<li>
				<span class="s1i s1i3"></span>
				<p>时尚的新理念，超前体验<br>未知的生活</p>
			</li>
			<li>
				<span class="s1i s1i4"></span>
				<p class="br0">完善的培养机制，培养你<br>全新的世界观</p>
			</li>
		</ul>
	</div>
	<div class="section2">
		<div class="s2i"></div>
		<h3>关于新世界，你不知道的还有什么？</h3>
	</div>
	<div class="section3">
		<h4>查找新世界城市活动信息</h4>
		<div class="line"></div>
		<p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
		<div class="lookup">
			<form action="">
			<select name="country" id="country">
				<option value="中国" selected="selected">中国</option>
				<option value="中国 香港">中国 香港</option>
				<option value="中国 台湾">中国 台湾</option>
			</select>
			<select name="province" id="province">
				<option value="北京市">北京市</option>
				<option value="天津市">天津市</option>
				<option value="河北省">河北省</option>
				<option value="陕西省">陕西省</option>
				<option value="内蒙古自治区">内蒙古自治区</option>
				<option value="辽宁省">辽宁省</option>
			</select>
			<select name="city" id="city">
				<option value="城市" selected="selected">城市</option>
				<option value="北京">北京</option>
			</select>
			<input type="submit" value="搜  索">
			</form>
		</div>

	</div>
	<div class="section4">
		<ul>
			<li>
				<img src="images/3_13.jpg" alt="">
				<div class="s4text"><h5>北京活动</h5><p>新社区大联盟</p></div>
			</li>
			<li>
				<div class="s4text "><h4>上      海      活      动</h4><p>夜上海新景观探索</p></div>
				<img src="images/3_17.jpg" alt="">
			</li>
			<li>
				<img src="images/3_19.jpg" alt="">
				<div class="s4text"><h5>深圳活动</h5><p>全新海岸线观点站</p></div>
			</li>
			<li>
				<img src="images/3_23.jpg" alt="">
				<div class="s4text"><h5>香港活动</h5><p>奢侈消费大派送</p></div>
			</li>
		</ul>
	</div>
	<div class="section5">
		<div class="fl section5_1">
			<h4>新世界</h4>
			<h1>TIME</h1>
			<p>@新世界－北京<br>2016.04.01</p>
		</div>
		<div class="section5_2">
			<img src="images/4_1.png" alt="">
			<p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
			<a href="##">更多详情</a>
			<ul class="section5_24">
				<li></li><li></li><li></li>
			</ul>
		</div>
		<div class="section5_3">
			<p>新时代<br>关于爱生活的我们</p>
			<div class="section5_31"></div>
			<a href="##">查看更多</a>
		</div>
		<div class="section5_4">
			<p>新时代<br>关于爱生活的我们</p>
			<div class="section5_41"></div>
			<a href="##">查看更多</a>
		</div>
		<div class="section5_5 fr">
			<img src="images/5.jpg" alt="">
		</div>
	</div>
	<div class="section6">
		<div class="section6_1">
			<h3>成为我们的志愿者</h3>
			<div class="section6_12"></div>
			<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br>那就不要犹豫，快来加入我们，成为改变所有人生活的人 </p>
		</div>
		<div class="section6_2">
			<div class="section6_2_1">
				<div class="section6_2_11">
					<h4>新世界志愿者协议</h4>
					<p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则 ......</p>
					<a href="#"><span class="s1i s1i5"></span>more</a>
				</div>
				<div class="section6_2_12">
					<h4>新世界志愿者权利</h4>
					<p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在四新世界活动的优先参与资格</p>
					<a href="#"><span class="s1i s1i5"></span>more</a>
				</div>
				<div class="section6_2_13">
					<h4>更多条款</h4>
					<a href="#"><span class="s1i s1i5"></span>more</a>
				</div>
			</div>
			<div class="section6_2_2">
				<form action="">
					<div class="ovh">
					<p><label for="">姓名：</label><input type="text"></p>
					<p><label for="">年龄：</label><input type="text"></p>
					<p><label for="">联系方式：</label><input type="text"></p>
					<p><label for="">联系地址：</label><input type="text"></p>
					</div>
					<div class="section6_2_2ta">
						<span>请简单描述您梦想的生活：</span>
					<textarea name="" id=""></textarea>
					</div>
					<input class="submit" type="submit" value="提交申请">
				</form>
			</div>
		</div>
	</div>
	<div class="section7">
		<h3>联系我们</h3>
		<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何方式关注我们动态</p>
		<form action="" class="section7_1">
			<input class="section7_2" type="text" placeholder="someone@email.com">
			<input class="section7_3" type="submit" value="提  交">
		</form>
		<ul>
			<li><a href="##"><span class="s1i s1i6"></span></a></li>
			<li><a href="##"><span class="s1i s1i7"></span></a></li>
			<li><a href="##"><span class="s1i s1i8"></span></a></li>
			<li><a href="##"><span class="s1i s1i9"></span></a></li>
		</ul>
	</div>
	<div class="bottom">
		<div class="fl">@2016新世界</div>
		<a class="fr" href="#top" class="backtotop">Back to top</a>
	</div>
	<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
(function($){
var selects=$('select');//获取select
for(var i=0;i<selects.length;i++){
	createSelect(selects[i],i);
}
function createSelect(select_container,index){
	//创建select容器，class为select_box，插入到select标签前
	var tag_select=$('<div></div>');//div相当于select标签
	tag_select.attr('class','select_box');
	tag_select.insertBefore(select_container);
	//显示框class为select_showbox,插入到创建的tag_select中
	var select_showbox=$('<div></div>');//显示框
	select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
	//创建option容器，class为select_option，插入到创建的tag_select中
	var ul_option=$('<ul></ul>');//创建option列表
	ul_option.attr('class','select_option');
	ul_option.appendTo(tag_select);
	createOptions(index,ul_option);//创建option
	//点击显示框
	tag_select.toggle(function(){
		ul_option.show();
	},function(){
		ul_option.hide();
	});
	var li_option=ul_option.find('li');
	li_option.on('click',function(){
		$(this).addClass('selected').siblings().removeClass('selected');
		var value=$(this).text();
		select_showbox.text(value);
		ul_option.hide();
	});
	li_option.hover(function(){
		$(this).addClass('hover').siblings().removeClass('hover');
	},function(){
		li_option.removeClass('hover');
	});
}
function createOptions(index,ul_list){
	//获取被选中的元素并将其值赋值到显示框中
	var options=selects.eq(index).find('option'),
		selected_option=options.filter(':selected'),
		selected_index=selected_option.index(),
		showbox=ul_list.prev();
		showbox.text(selected_option.text());
	//为每个option建立个li并赋值
	for(var n=0;n<options.length;n++){
		var tag_option=$('<li></li>'),//li相当于option
			txt_option=options.eq(n).text();
		tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
		//为被选中的元素添加class为selected
		if(n==selected_index){
			tag_option.attr('class','selected');
		}
	}
}
})(jQuery)
</script>
</body>
</html>